<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="pragma" content="no-cache"/>
  <meta http-equiv="content-type" content="no-cache, must-revalidate"/>
  <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
  <title>文件信息</title>

  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/nav.css">
  <link rel="stylesheet" href="../css/font-awesome.css">
  <link rel="stylesheet" href="../css/element/index.css">

  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
<div id="wrapper" v-cloak>
  <!--导航栏-->
  <div style="width: 200px; float: left">
    <div class="sideMenu">
      <div class="head">文件管理系统</div>
      <ul>
        <li class="nLi">
          <h3><i class="fa fa-dashboard"></i>首页<span class="fa fa-angle-up arrow"></span></h3>
          <ul class="sub">
            <li><a href="index.html"><i class="fa fa-dashboard"></i>首页</a></li>
          </ul>
        </li>
        <li class="nLi on">
          <h3><i class="fa fa fa-dashboard icon"></i>信息展示<span class="fa fa-angle-up arrow"></span>
          </h3>
          <ul class="sub">
            <li v-if="authority.indexOf(1) != -1">
              <a href="adminInfo.html"><i class="fa fa-table"></i>管理员信息</a>
            </li>
            <li v-if="authority.indexOf(2) != -1">
              <a href="userInfo.html"><i class="fa fa-table"></i>用户信息</a>
            </li>
            <li v-if="authority.indexOf(3) != -1">
              <a href="typeInfo.html"><i class="fa fa-table"></i>文件分类</a>
            </li>
            <li v-if="authority.indexOf(4) != -1">
              <a href="fileInfo.html" class="active"><i class="fa fa-table"></i>文件信息</a>
            </li>


            <li>
              <a href="javascript:void(0)" @click="personalPage"><i class="fa fa-user"></i>个人信息</a>
            </li>
          </ul>
        </li>

        <li class="nLi">
          <h3><i class="fa fa-unlock-alt"></i>修改密码<span class="fa fa-angle-up arrow"></span></h3>
          <ul class="sub">
            <li>
              <a href="updatePassword.html"><i class="fa fa-unlock-alt"></i>修改密码</a>
            </li>
          </ul>
        </li>
        <li class="nLi">
          <h3><i class="fa fa-power-off"></i>退出登录<span class="fa fa-angle-up arrow"></span></h3>
          <ul class="sub">
            <li>
              <a href="javascript:void(0)" @click="logout"><i class="fa fa-power-off"></i>退出登录</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <!-- 主体 -->
  <div style="margin-left: 200px; position: relative">
    <!-- 多余的盖住边框线        -->
    <div style="height: 60px; width: 10px; background-image: linear-gradient(to bottom, #26a3de,#057db5); position: absolute;left: -1px"></div>
    <!-- 头部开始 -->
    <div style="width: 100%;height: 60px;line-height: 60px; background-image: linear-gradient(to bottom, #26a3de,#057db5); display: flex">
      <div style="flex: 1; font-size: 16px; padding: 0 20px"><a class="fa fa-user" style="color: white;"
                                                                href="javascript:void(0)"
                                                                @click="personalPage">{{user.name}}</a></div>
      <div style="flex: 1; text-align: right">
        <!--                <a href="" style="font-size: 16px; color: white; margin:0 10px">你好，管理员</a>-->
        <a href="javascript:void(0)" @click="logout" class="fa fa-sign-out"
           style="font-size: 16px; color: white; margin:0 10px">退出</a>
      </div>
    </div>
    <!-- 头部结束 -->

    <!-- 主体开始 -->
    <div>
      <div>
        <div style="color: black; background-color: #fff; padding: 10px 20px; font-style: italic; font-size: 20px">
          文件信息
        </div>
      </div>

      <!-- 表格主体-->
      <div style="margin-top: 10px; padding: 0 10px">
        <div>
          <div style="padding: 10px; border-radius: 10px 10px 0 0; color: #000; background-color: #ddd;">
            文件信息表
          </div>
          <div style="background-color: #fff; border: 1px solid #ccc; padding: 10px">
            <div class="table-responsive">
              <div class="nx-table-header">
                <button class="btn btn-sm btn-primary" @click="add()">新增</button>

                <input style="margin-left: 20px" type="text" placeholder="请输入文件名称"
                       v-model="name">

                <select v-model="typeId">
                  <option :value="0" name="typeId">请选择文件类型</option>
                  <option v-for="item in typeObjs" :value="item.id" name="typeId">{{item.name}}
                  </option>
                </select>
                <button class="btn btn-sm btn-primary" @click="loadTable(1)">搜索</button>
                <!--                                <i class="glyphicon glyphicon-search" style="margin-left: -20px"></i>-->
              </div>
              <table class="table table-striped table-bordered table-hover" style="margin-top: 10px">
                <thead>
                <tr>

                  <th>文件名称</th>
                  <th>上传时间</th>
                  <th>分类名称</th>

                  <!--                                    <th>文件名</th>-->
                  <th>上传人</th>
                  <th>文件操作</th>
                  <th>记录操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(obj,index) in tableData" :key="obj.id">
                  <td>{{obj.name}}</td>
                  <td>{{obj.time}}</td>
                  <td>{{obj.typeName}}</td>

                  <!--                                    <td>{{obj.fileName}}</td>-->
                  <td>{{obj.userName}}</td>
                  <td>
                    <button class="btn btn-primary btn-xs" @click="viewModal(obj)">预览</button>
                    <button class="btn btn-success btn-xs" @click="downFile(obj.id)">下载</button>
                  </td>
                  <td>
                    <button class="btn btn-primary btn-xs" @click="init(obj)">更新</button>
                    <button class="btn btn-success btn-xs" @click="del(obj.id)">删除</button>
                  </td>
                </tr>
                </tbody>
              </table>


              <nav aria-label="Page navigation example">
                <ul class="pagination">
                  <li class="page-item" v-bind:class="{ disabled: preActive }">
                    <a class="page-link" href="javascript:void(0)"
                       v-on:click="loadTable(pageInfo.pageNum - 1)">上一页</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="javascript:void(0)" v-if="pageInfo.pageNum > 1"
                       v-on:click="loadTable(pageInfo.pageNum - 1)">{{pageInfo.pageNum - 1}}</a>
                  </li>
                  <li class="page-item disabled">
                    <a class="page-link" aria-disabled="true"
                       href="javascript:void(0)">{{pageInfo.pageNum}}</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="javascript:void(0)" v-if="pageInfo.hasNextPage"
                       v-on:click="loadTable(pageInfo.pageNum + 1)">{{pageInfo.pageNum + 1}}</a>
                  </li>
                  <li class="page-item" v-bind:class="{ disabled: nextActive }">
                    <a class="page-link" href="javascript:void(0)"
                       v-on:click="loadTable(pageInfo.hasNextPage? (pageInfo.pageNum + 1) : pageInfo.pageNum)">下一页</a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
      <!-- 表格主体结束-->
    </div>
    <!-- 主体结束 -->
  </div>

  <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          文件预览
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="cancel">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" style="height: 300px; text-align: center">
          <img id="view-img" v-if="imgShow" :src="url" alt="" style="width: 400px; ">
          <video v-if="videoShow" id="video-control" :src="url" controls="controls"
                 style="width: 80%; height: 100%">
            您的浏览器不支持 video 标签。
          </video>
        </div>
      </div>
    </div>
  </div>


  <!-- ADDModal -->
  <div class="modal" tabindex="-1" role="dialog" id="mod">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <span class="modal-title">请填写信息</span>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form class="form-horizontal">
            <input type="hidden" id="id" name="id" v-model="entity.id">
            <input type="hidden" name="level" v-model="entity.level">
            <input type="hidden" name="userId" v-model="entity.userId">
            <div class="form-group">
              <label class="col-sm-3 control-label">文件名称</label>
              <div class="col-sm-7">
                <input type="text" class="form-control" v-model="entity.name"
                       placeholder="请输入文件名称" id="name">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">上传时间</label>
              <div class="col-sm-7">
                <div class="block">
                  <el-date-picker v-model="entity.time" id="time" type="datetime" clearable
                                  value-format="yyyy-MM-dd HH:mm:ss"
                                  placeholder="选择日期时间"></el-date-picker>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">关联文件分类</label>
              <div class="col-sm-7">
                <select class="form-control" v-model="entity.typeId">
                  <option v-for="item in typeObjs" :value="item.id" name="typeId">{{item.name}}
                  </option>
                </select>
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-3 control-label">上传文件</label>
              <div class="col-sm-7">
                <div style="margin-top: 8px">
                  <input id="upload-file-id" @change="upload" type="file" ref="file">
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="update()">保存
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /. WRAPPER  -->

<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/my.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/base64.min.js"></script>
<script src="../js/element/index.js"></script>
<!--文件上传js-->
<script>
  function msg(type, msg) {
    Vue.prototype.$message({
      type: type, // success（成功）、warning（警告）, error(错误)
      message: msg,
      duration: 2000,
      offset: 100,
      center: true
    })
  }

  new Vue({
    el: '#wrapper',
    data: {
      typeObjs: [],

      authority: [],
      permission: [],
      imgShow: false,
      videoShow: true,
      url: '',
      name: '',
      typeId: 0,
      entity: {},
      tableData: [],
      pageInfo: {},
      preActive: true,
      nextActive: true,
      user: {}
    },
    created: function () {
      this.user = JSON.parse(localStorage.getItem('user'));
      this.loadTable(1);
      axios.get("/permission/4").then(res => {
        if (res.data.code === '0') {
          this.permission = res.data.data;
        } else {
          msg('error', res.data.msg);
        }
      });

      axios.get("/authority").then(res => {
        if (res.data.code === '0') {
          this.authority = res.data.data;
        } else {
          msg('error', res.data.msg);
        }
      });

      /**
       * 获取所有文件标签
       * @type {number}
       */
      // this.entity.typeId = 0;
      // axios.get("/typeInfo").then(res => {
      //   if (res.data.code === '0') {
      //     this.typeObjs = res.data.data;
      //   } else {
      //     msg('error', res.data.msg);
      //   }
      // });

    },
    methods: {
      // loadTable(pageNum) {
      //   let name = this.name === '' ? "all" : this.name;
      //   let typeId = this.typeId;
      //   axios.get("/fileInfo/page/" + name + "/" + typeId + "?pageNum=" + pageNum).then(res => {
      //     if (res.data.code === '0') {
      //       this.tableData = res.data.data.list;
      //       this.pageInfo = res.data.data;
      //       this.preActive = !(this.pageInfo.hasPreviousPage);
      //       this.nextActive = !(this.pageInfo.hasNextPage);
      //     } else {
      //       msg('error', res.data.msg);
      //     }
      //   });
      // },
      // upload: function () {
      //   let files = this.$refs.file.files;
      //   console.log(files)
      //   for (let i = 0; i < files.length; i++) {
      //     let formData = new FormData();
      //     formData.append('file', files[i]);
      //     axios.post('/files/upload', formData, {
      //       'Content-Type': 'multipart/form-data'
      //     }).then(res => {
      //       if (res.data.code === '0') {
      //         msg('success', '文件上传成功');
      //         this.entity.fileId = res.data.data.id;
      //         this.entity.fileName = res.data.data.originName;
      //       } else {
      //         msg('error', res.data.msg);
      //       }
      //     })
      //   }
      // },
      // // readView: function(url){
      // //     // http://127.0.0.1:8888/end/page/imagetest.html
      // //     // var url = 'http://127.0.0.1:8888/file/WordToPNG1.png'; //要预览文件的访问地址
      // //     // var url = 'C:\\Users\\ssm\\Desktop\\Srping.md'; //要预览文件的访问地址
      // //     window.open('http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url)));
      // // }
      // // ,
      // viewModal: function (data) {
      //   axios.get("/fileInfo/" + data.id).then(res => {
      //     if (res.data.code === '0') {
      //       let info = res.data.data;
      //
      //       axios.get("/files/" + info.fileId).then(res => {
      //
      //         let url_str="http://127.0.0.1:8888/file/"+res.data.data.fileName;
      //         console.log(url_str);
      //         window.open('http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url_str)));
      //         console.log('http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url_str)));
      //       });
      //
      //
      //       // this.url = '/files/download/' + res.data.data.fileId;
      //       // if (/\.(png|jpg|gif|jpeg|webp)$/.test(info.fileName)) {
      //       //     this.imgShow = true;
      //       //     this.videoShow = false;
      //       //
      //       //
      //       //
      //       //     let img = new Image();
      //       //     img.src = this.url;
      //       //     // 加载完成执行
      //       //     img.onload = function(){
      //       //         let scale = img.width / img.height;  // 图片的宽高比
      //       //         let width = 270 * scale;  // 先按照高度等比缩小
      //       //         if(width > 570) {   // 如果缩小后的宽度超出模态框（模态框宽598px），则再次按照宽度等比缩小
      //       //             let height = 570 / scale;
      //       //             $('#view-img').css('width', '570px').css('height', height + 'px');
      //       //         } else {
      //       //             $('#view-img').css('width', width + 'px').css('height', '270px');
      //       //         }
      //       //     };
      //       // } else if (/\.mp4$/.test(info.fileName)) {
      //       //     this.imgShow = false;
      //       //     this.videoShow = true;
      //       // } else {
      //       //     msg('warning', '不支持该格式的文件预览');
      //       //     return;
      //       // }
      //       // $("#myModal").modal('show');
      //
      //     } else {
      //       msg('error', res.data.msg);
      //     }
      //   });
      // },
      // cancel: function () {
      //   let $video = $("#video-control")[0];
      //   if ($video) {
      //     $video.pause();
      //   }
      // },
      // downFile: function (id) {
      //   axios.get("/fileInfo/" + id).then(res => {
      //     if (res.data.code === '0') {
      //       location.href = '/files/download/' + res.data.data.fileId;
      //     } else {
      //       msg('error', res.data.msg);
      //     }
      //   });
      // },
      // init(o) {
      //   if (this.permission.indexOf(3) === -1) {
      //     msg('warning', '你没有权限操作');
      //     return;
      //   }
      //   this.entity = JSON.parse(JSON.stringify(o));
      //   $('#mod').modal('show');
      // },
      // add() {
      //   if (this.permission.indexOf(1) === -1) {
      //     msg('warning', '你没有权限操作');
      //     return;
      //   }
      //   this.entity = {};
      //   $('#upload-file-id').val('');
      //   $('#mod').modal('show');
      // },
      // update() {
      //   if (checkValid(this.entity)) {
      //     if (!this.entity.id) {
      //       axios.post(
      //               "/fileInfo", this.entity
      //       ).then(res => {
      //         if (res.data.code === '0') {
      //           msg('success', '添加成功');
      //           this.loadTable(1);
      //         } else {
      //           msg('error', res.data.msg);
      //         }
      //       })
      //     } else {
      //       axios.put(
      //               "/fileInfo", this.entity
      //       ).then(res => {
      //         if (res.data.code === '0') {
      //           msg('success', '更新成功');
      //           this.loadTable(1);
      //         } else {
      //           msg('error', res.data.msg);
      //         }
      //       })
      //     }
      //   }
      // },
      // del: function (id) {
      //   if (this.permission.indexOf(2) === -1) {
      //     msg('warning', '你没有权限进行该操作');
      //     return;
      //   }
      //   let _this = this;
      //   this.$confirm('确认删除？', '系统提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     cancelButtonClass: 'btn-custom-cancel',
      //     type: 'warning'
      //   }).then(function () {
      //     axios.delete("/fileInfo/" + id).then(res => {
      //       if (res.data.code === '0') {
      //         msg('success', '文件删除成功');
      //         _this.loadTable(1);
      //       } else {
      //         msg('error', res.data.msg);
      //       }
      //     });
      //   }).catch(function () {
      //     console.log("取消成功！");
      //   });
      // },
      // logout() {
      //   logout();
      // }
    }
  })
</script>
</body>
</html>
